<template>
  <vxe-grid
    id="orderMaterialRelationTable"
    ref="orderMaterialRelationTable"
    v-bind="tableConfig"
    :tooltip-config="tableConfig.tooltipConfig"
    :data="orderMaterialRelationList"
    :keyboard-config="tableConfig.keyboardConfig">
    <template #component_title >
        <span style="color: black;font-size: 15px;font-weight: bolder !important;">
          <i class="fa fa-pencil-square-o" aria-hidden="true">&nbsp;
          </i>订单材料管理</span>
    </template>
    <template #tool_button>
      <vxe-button
        title="新增供应商"
        style="padding-top: 3px;padding-left: 7px;margin-right:10px "
        icon="fa fa-plus"
        name="新增供应商"
        @click="insertEvent(-1)"
        circle v-if="!isDetail">
      </vxe-button>
    </template>

    <template #supplierName="{}">
      <m-entity-select
        placeholder="请选择供应商"
        module="material"
        entity="Supplier"
        show-options-name="name"
        class="ele-fluid" @getEntitySupplierSelect="getEntitySupplierSelect"
      />
    </template>

    <template #supplyMaterialName="{row}">
      <m-entity-select
        v-model:value="row.materialName"
        placeholder="请选择供应商材料"
        module="material"
        entity="SupplyMaterial"
        show-options-name="name"
        class="ele-fluid"
      />
    </template>



    <template #ratio="{ row }">
      <span>{{ countRatio(row) }}</span>
    </template>

<!--    <template #status="{row}">
      <div v-if="isDetail">
        <a-tag v-if="row.status==='启用'" color="green">{{row.status}}</a-tag>
        <a-tag v-if="row.status==='停用'" color="red">{{row.status}}</a-tag>
      </div>
      <div v-else>
        <vxe-button type="button"
                    status="danger"
                    style="height: 28px;padding-bottom: 3px;"
                    v-if="row.status==='停用'"
                    @click="changeStatus(row)">停用
        </vxe-button>
        <vxe-button type="button"
                    status="success"
                    style="height: 28px;padding-bottom: 3px;"
                    v-if="row.status==='启用'"
                    @click="changeStatus(row)">启用
        </vxe-button>
      </div>
    </template>-->

    <template #operate="{ row }">
      <a-space>
        <a-popconfirm
          title="确定要删除此材料吗？"
          @confirm="removeEvent(row)">
          <vxe-button icon="fa fa-trash" title="删除" circle></vxe-button>
        </a-popconfirm>
      </a-space>
    </template>
  </vxe-grid>

</template>

<script>
import {defineComponent} from 'vue'
import orderMaterialRelationMapMannage from './js'
import MEntitySelect from "@/components/MEntity/entitySelect";

export default defineComponent({
  name: "MOrderMaterialRelationMannage",
  props: {
    materialOrderId: String,
    isDetail: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    orderMaterialRelations: Array,
    height:String,
  },
  components: {MEntitySelect},
  setup(props, context) {
    const {
      // changeStatus,
      orderMaterialRelationTable,
      orderMaterialRelationList,
      reload,
      orderMaterialRelationChange,
      insertEvent,
      removeEvent,
      getOrderMaterialRelationList,
      tableConfig,
      validAccounts,
      test,
      countRatio
    } = orderMaterialRelationMapMannage(props, context)

    // const getEntitySupplierSelect = (data) => {
    //   // =data.eid
    // }



    return {
      validAccounts,
      // changeStatus,
      tableConfig,
      orderMaterialRelationTable,
      orderMaterialRelationList,
      reload,
      orderMaterialRelationChange,
      // getEntitySupplierSelect,
      insertEvent,
      removeEvent,
      getOrderMaterialRelationList,
      test,
      countRatio
    }

  },

})
</script>

<style>
.vxe-toolbar-mt {
  padding: 0 10px;
  background-color: #f6f6f6 !important;
}
</style>
